<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>_this对象</title>
</head>
<body>
    <button desc="hdcms">button</button>
</body>
</html>
<script>
    //刚进入页面的时候 把所有的数据捋一遍
    //准备好Dom对象  因为调用  准备好了button对象 和点击事件
    //然后都准备好之后  做相应的操作  就会做对应的动作
    let Dom = {
        site : '后盾人',
        //使用handleEvent 绑定事件处理器,this指的是当前对象，而不是DOM对象
        //所以当想使用当前对象的时候  并且还想使用当前的DOM对象的时候  可以使用默认绑定事件处理器
        handleEvent:function(event){
            // console.log(this.site)
            // console.log(event.target)
            alert(this.site + '--' + event.target.innerHTML);
        },
        //使用普通函数时this为当前的DOM对象
        bind(){
            const button = document.querySelector("button");
            button.addEventListener("click",function(){
                alert(this.getAttribute('desc'));
            });
        },
        bind1(){
            const button = document.querySelector("button");
            //使用箭头函数的时候  this指代的是上下文
            //这里的this指代的是 Dom 
            //这里的event.target 指代的是当前操作的dom对象
            button.addEventListener('click',event => {
                // console.log(this.site)
                // console.log(event.target)
                alert(this.site + '++' + event.target.innerHTML);
            });
        },
        bind2(){
            const button = document.querySelector("button");
            button.addEventListener("click",this);
        }

    };
    Dom.bind2();
</script>